<!-- <app-header></app-header> -->

<h1>angular模板里面绑定数据</h1>
<p>{{title}}</p>
<h2>{{msg}}</h2>
<!-- <h3>{{username}}</h3> -->
<h4>{{student}}</h4>
<h3>我是一个新闻组件！</h3>

<hr>
<h6>{{userinfo.username}}</h6>
<div>{{message}}</div>


<h1>angular模板里面绑定属性</h1>

<div title="我是一个div">
    鼠标瞄上去看一下
</div>

<div [title]="student">
    少年阿鑫
</div>

<h1>angular模板里面绑定Html</h1>

<div>
    {{content}}
</div>

<span [innerHtml]='content' class='red'></span>

<h1>angular模板允许简单运算</h1>
1+2 = {{1+2}}



<hr color='red'>
<h1>angular里面的数据循环</h1>

<ul>
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ul>

<ol>
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ol>

<ol>
    <li *ngFor="let item of list">  
        {{item}}
    </li>
</ol>

<br>
<ul>
    <li *ngFor="let user of userList">
        {{user.username}}----{{user.age}}
    </li>
</ul>


<br>

<ul>
    <li *ngFor="let item of cars">
        {{item.brand}}

        <ol>
            <li *ngFor="let car of item.list">
                    {{car.title}} ---- {{car.price}}
            </li>
        </ol>
    </li>
</ul>